<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆违章查询</title>
    <link rel="stylesheet" href="/static/css/style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
<div id="result">
    <input type="text" name="carno" value="" v-model="keyword" placeholder="请输入车牌号或车主姓名">
    <input type="submit" value="查询" @click="loadData()">
    </form>
    <hr>

    <div class="data">
        <table v-if="search">
            <tr>
                <th>车牌</th>
                <th>车主</th>
                <th>时间</th>
                <th>违章原因</th>
                <th>处罚方式</th>
                <th>是否受理</th>
                <th>操作</th>
            </tr>
            <tr v-for="record in records">
                <td>{{ record.car.id }}</td>
                <td>{{ record.car.owner }}</td>
                <td>{{ record.makedate }}</td>
                <td>{{ record.reason }}</td>
                <td>{{ record.punish }}</td>
                <td>
                    <span v-if="record.dealt">已受理</span>
                    <span v-if="!record.dealt">未受理</span>
                </td>
                <td class="handler">

                    <a @click.prevent="handleRecod(record)" href="">受理</a>
                    <a @click.prevent="deleteRecord(record)" href="">删除</a>

                </td>
            </tr>

        </table>

    </div>
</div>


<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>


<script>
    let app = new Vue({
        el: '#result',
        data: {
            keyword: '',
            records: [],
            search: false,
        },
        methods: {
            handleRecod(record) {
                fetch('/carapp/handle/' + record.id + '/', {
                    method: 'PUT',
                })
                    .then(resp => {
                        if(resp.status === 200)
                        {
                            record.dealt = true
                        }
                    })


            },
            deleteRecord(record) {

                if (confirm('确定删除该记录嘛?')) {
                    if (record.dealt) {
                        fetch('/carapp/delete/' + record.id + '/', {
                            method: 'DELETE',
                        })
                            .then(resp => {
                                if (resp.status === 204) {
                                    let index = this.records.indexOf(record)
                                    this.records.splice(index, 1)
                                }
                            })


                    } else {
                        alert('不能删除未受理的数据')
                    }

                }

            },


            loadData() {
                let url = '/carapp/search/'
                if (this.keyword.length > 0) {
                    url += '?keyword=' + this.keyword
                }
                fetch(url).then(resp => resp.json())
                    .then(json => {
                        this.records = json
                        this.search = this.records.length > 0
                    })
            }
        },
    })

</script>


</body>
</html>